<template>
  <div class="topbar-container">
    <editBaseInfo></editBaseInfo>
    <div v-if="editEnable && productType === 'vehicle'" class="mode-switch">
      <el-switch
        style="display: block"
        v-model="stageMode"
        active-color="#486cff"
        inactive-color="#e7eaf5"
        active-text="阶段模式"
        inactive-text="简洁模式"
        @change="editModeChange">
      </el-switch>
    </div>
    <div class="page-top-button-area">
      <el-badge v-if="editEnable" :value="0" :hidden="true" type='success' class="button-badge">
        <el-button @click="choosePanelVisible" class="top-button-item">选装信号</el-button>
      </el-badge>
      <el-badge v-if="editEnable" :value="errorClashList.length || warningClashList.length" :hidden="clashList.length === 0" :type='errorClashList.length ? "danger" : "warning"' class="button-badge">
        <el-button @click="clashPanelVisible" class="top-button-item">问题检测</el-button>
      </el-badge>
      <el-button v-if="editEnable" @click="goSimulation" class="top-button-item">仿真测试</el-button>
      <div v-if="editEnable" class="gun"></div>
      <el-button @click="exit" class="top-button-item">退出</el-button>
      <el-button :loading='saveLoading' v-if="editEnable" @click="saveRuleChain" class="top-button-item" type='primary'>保存</el-button>
    </div>
  </div>
</template>

<script>
import editBaseInfo from './components/editBaseInfo'
import { mapState } from 'vuex'

export default {
  name: 'TopBar',
  components: { editBaseInfo },
  data() {
    return {
      stageMode: false
    }
  },
  props: {
    supportVehicles: {
      default: []
    },
    saveLoading: Boolean,
    editMode: String
  },
  computed: {
    ...mapState({
      productType: state => state.product.type,
      productInfo: state => state.product.productInfo,
      clashList: state => state.clash.clashList,
      editEnable: state => true
    }),
    errorClashList() {
      return this.clashList.filter(item => item.type === 'error')
    },
    warningClashList() {
      return this.clashList.filter(item => item.type === 'warning')
    }
  },
  watch: {
    editMode: {
      handler(val) {
        this.stageMode = (val === 'stage')
      },
      immediate: true
    }
  },
  methods: {
    validatePanelVisible() {
      this.$emit('vehicleValidate')
    },
    clashPanelVisible() {
      this.$emit('clashValidate')
    },
    choosePanelVisible() {
      this.$emit('chooseValidate')
    },
    goSimulation() {
      this.$emit('simulation')
    },
    exit() {
      this.$emit('exit')
    },
    saveRuleChain() {
      this.$emit('saveRuleChain')
    },
    editModeChange(val) {
      if (!val) {
        this.$confirm('切换至【简洁模式】后，编辑器将清空【结束阶段】的所有内容。是否仍要进行切换?', {
          customClass: 'switch-confirm-dialog',
          showClose: false,
          confirmButtonText: '切换',
          cancelButtonText: '取消'
        }).then(() => {
          this.$emit('editModeChange', this.stageMode ? 'stage' : 'easy')
        }).catch(() => {
          this.stageMode = true
        })
      } else {
        this.$emit('editModeChange', this.stageMode ? 'stage' : 'easy')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/variables.scss";
.topbar-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  height: $app-header-height;
  padding: 0 24px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.mode-switch {
  display: flex;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  ::v-deep.el-switch__core {
    width: 30px !important;
    height: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    &::after {
      top: -7px;
      left: -1px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }
  }
  ::v-deep.el-switch.is-checked .el-switch__core::after {
    left: 100%;
    margin-left: -15px;
  }
}
.page-top-button-area{
  display: flex;
  align-items: center;
  .gun{
    width: 1px;
    background-color: #EEE;
    height: 30px;
    margin-left: 16px;
  }
  .top-button-item{
    margin-left: 16px;
    border-radius: 2px;
  }
}
</style>
<style lang="scss">
.topbar-container .page-top-button-area .button-badge .el-badge__content {
  top: -8px;
  right: -12px;
  transform: scale(0.9, 0.9);
  height: 16px;
  line-height: 12px;
  padding: 1px 6px 3px;
}
.topbar-container .el-switch__label{
  color: #a3a3a3;
  &.is-active{
    color: #1f1f1f;
  }
}
.switch-confirm-dialog {
  width: 280px;
  .el-message-box__header{
    padding: 5px;
  }
}
</style>
